flex
對我來說
是一種排版方式

因為現在都追求RWD (響應式網頁設計（英語：Responsive web design，通常縮寫為RWD）)

而且現在使用者客戶端的尺寸也不一樣

根據使用者的客戶端瀏覽器尺寸每個都客製化的話也會刻到死
更何況還有IE.Chrome.FireFox......等等不同家的瀏覽器
而且還會有轉換的BUG要解

所以
用這種有彈性
而不是寫死的排版方式

有助於適應不同的客戶端

然後新開始

推薦大家玩一個小遊戲

https://flexboxfroggy.com/#zh-tw

這個需要一點點的CSS基礎

剩下就是把它介紹的東西，慢慢學習慢慢應用上去

這個會卡關是正常的
因為是初學者

但是如果是正常前端工程師，完全不太會卡關，只是要想一下而已

因為真的整天排版就是和這個打交道

然後工作上

就存著這張作弊表(cheat sheet)偶而忘記開起來查一下就好

https://blog.poychang.net/angular-flex-layout-cheat-sheet/
引用自poychang部落格

以及
flex其實還有連動關係

就是
fxLayout="row"
這個主要的方向如果沒出來的話

fxLayoutAlign="space-around center"

以及
fxLayoutGap會沒有效用

這個也算是新手常踩的小坑，
常常看到一些因為以為沒效用，所以繼續一路加更多CSS只為了達到一個小效果

還原之後才知道可以不必繞一圈，只要加個fxLayout方向就好了

最後
https://tburleson-layouts-demos.firebaseapp.com/#/docs

這個看一下就好，如果沒研究清楚，這個範例其實會讓人很搞混
但是因為有時還是會查一下，所以貼上來讓各位學習

接下來明天繼續講